<template>
	<view :style="{ background: pageData.bgColor, '--color': color, '--inactive-color': pageData.inactiveColor || '#606266' }">
		<!-- 样式三 -->
		<view v-if="pageData.style == 3">
			<view class="p-bot30 p-left8 p-right8">
				<u-tabs
					:list="list"
					:activeStyle="{ color }"
					lineWidth="20"
					:lineColor="color"
					keyName="bussName"
					@click="click"
					:inactiveStyle="{ color: pageData.inactiveColor }"
				></u-tabs>
			</view>
			<scroll-view scroll-x class="slide p-left30 border-box" @scrolltolower="scrolltolower" v-if="list.length">
				<view class="item m-right30 p-re" v-for="(item, index) in stores" :key="index" @click="toUrl('/pages/store/storeIndex?shop_id=' + item.shop_id)">
					<text class="iconfont size28 p-ab" :class="item.shop_collect == 1 ? 'icon-guanzhu3' : 'icon-guanzhu1'" @click.stop="handleCollect(item)"></text>
					<image :src="$imgUrls(item.logo)" mode="aspectFill" class="img" :class="{ shadow: pageData.shadow }"></image>
					<view class="d-flex a-center p-top20 m-bot20">
						<view class="type h7 white thmeBg m-right10 f-shrink-0">{{ item.bussName }}</view>
						<view class="size30 bold300 ellipsis">{{ item.name }}</view>
					</view>
					<view class="h6 color_99 bold300 ellipsis m-bot30">{{ item.address }}</view>
				</view>
			</scroll-view>
		</view>

		<view v-else :class="{ 'd-flex': pageData.style == 2 }" :style="{ '--height': (pageData.height || 440) * 2 + 'rpx' }">
			<!-- 顶部菜单 -->
			<view v-if="pageData.style == 1">
				<!-- scrollable禁止滚动可使标签居中 -->
				<u-tabs
					:list="list"
					:scrollable="false"
					:activeStyle="{ color }"
					lineWidth="20"
					:lineColor="color"
					keyName="bussName"
					@click="click"
					itemStyle="padding: 0; height: 44px;"
					:inactiveStyle="{ color: pageData.inactiveColor }"
				></u-tabs>
			</view>

			<!-- <view class="d-flex j-sa m-top30" v-if="pageData.style == 1">
                <view class="color_33 text-center" :class="{'thmeColor': index==current}" v-for="(item,index) in list" :key="index" @click="click({index})">
                    <image :src="$imgUrls(item.busImg)" mode="aspectFill" class="tabImg m-bot10"></image>
                    <view>{{ item.bussName }}</view>
                </view>
            </view> -->

			<!-- 左侧菜单 -->
			<view class="side" v-if="pageData.style == 2">
				<view class="tab" :class="{ on: index == current }" v-for="(item, index) in list" :key="index" @click="click({ index })">{{ item.bussName }}</view>
			</view>
			<scroll-view :scroll-y="pageData.scroll" class="padding30 border-box" :class="{ 'flex-1 p-left0': pageData.style == 2, 'scrollH': pageData.scroll }"
				@scrolltolower="scrolltolower" v-if="list.length">
				<view
					class="storeItem bgwhite bor_radius_8 padding20 d-flex"
					v-for="(item, index) in stores"
					:key="index"
					:class="{ shadow: pageData.shadow, 'm-top20': index }"
					@click="toUrl('/pages/store/storeIndex?shop_id=' + item.shop_id)"
				>
					<image :src="$imgUrls(item.logo)" mode="aspectFill" class="img bor_radius_10"></image>
					<view class="p-left20 flex-1">
						<view class="d-flex a-center">
							<view class="type h7 white thmeBg m-right10 f-shrink-0">{{ item.bussName }}</view>
							<view class="size30 ellipsis">{{ item.name }}</view>
						</view>
						<view class="d-flex a-center m-top20" v-if="pageData.style == 1">
							<view class="d-flex a-center m-right20">
								<u-rate
									:value="item.score"
									:minCount="0"
									activeColor="#FF632D"
									inactiveColor="#e6e5e4"
									inactiveIcon="star-fill"
									size="16"
									gutter="1"
									readonly
									allowHalf
								></u-rate>
								<view class="score size28 bold p-left10">{{ item.score }}</view>
							</view>
							<view class="h6 color_68" v-if="item.sales_number">销量{{ item.sales_number }}</view>
						</view>
						<view class="d-flex a-center m-top20" v-else>
							<view class="score bold p-right20">
								<text class="size28">{{ item.score }}</text>
								<text class="h6">分</text>
							</view>
							<view class="h6 color_68 p-right20" v-if="item.sales_number">销量{{ item.sales_number }}</view>
							<!-- <view class="h6 color_68">好评{{ item.favorable }}%</view> -->
						</view>
						<view class="d-flex j-sb color_68 m-top20" v-if="item.address">
							<view class="d-flex a-center flex-1">
								<text class="iconfont icon-daohang m-right8"></text>
								<text class="h6 ellipsis">{{ item.address }}</text>
							</view>
							<view class="h6 p-left10" v-if="pageData.style == 1 && item.distance">{{ item.distance }}</view>
						</view>
						<view class="d-flex a-center color_68 m-top20" v-if="item.runTime">
							<text class="iconfont icon-bar_icon_shijian size26 m-left4 m-right8"></text>
							<text class="h6">{{ item.runTime }}</text>
						</view>
					</view>
				</view>

				<emptys v-if="!stores.length" :top="10"></emptys>
			</scroll-view>
		</view>
		<view class="padding10 thmeColor text-center" v-if="pageData.style != 3">
			<view class="size26" @click="$rectTo('/pages/store/storeList')" v-if="pageData.scroll">查看全部</view>
			<view class="size26" @click="scrolltolower" v-if="!pageData.scroll && more">查看更多</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
	props: ['pageData'],
	data() {
		return {
			list: [], // 分组
			current: 0,
			page: 1,
			more: false,
			stores: [] // 选中分组的门店列表
		}
	},
	computed: {
		...mapState(['color', 'vid'])
	},
	mounted() {
		this.getBlockInfo()
	},
	methods: {
		...mapMutations(['setHome']),
		async getBlockInfo() {
			this.more = false
			let params = {
				articlePage: this.page,
				articleLimit: 10
			}
			const result = await this.$getBlockInfo(this.pageData.list, params)
			this.list = result.list || []
			if(!this.list.length) return
			let arr = this.list[this.current].goods_list || []
			this.stores = this.page == 1 ? arr : this.stores.concat(arr)
			if(arr.length > 9) this.more = true
		},
		click(e) {
			this.current = e.index
			this.page = 1
			this.getBlockInfo()
		},
		handleCollect(item) {
			// 关注
			if (!this.vid) return this.setHome({ showMode: true })
			this.$http
				.post({
					url: '/singleSaleApi/store_collect',
					data: {
						store_id: item.shop_id
					}
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg)
					item.shop_collect = item.shop_collect == 1 ? 0 : 1
				})
		},
		scrolltolower(e) { // 滚动到底部/右边时加载更多
			if(this.more) {
				this.page ++ 
				this.getBlockInfo()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.tabImg {
	width: 100rpx;
	height: 100rpx;
}
.slide {
	white-space: nowrap;
	.item {
		display: inline-block;
		width: 280rpx;
		.img {
			width: 280rpx;
			height: 436rpx;
		}
		.icon-guanzhu1,
		.icon-guanzhu3 {
			top: 20rpx;
			left: 20rpx;
			color: var(--color);
			z-index: 10;
		}
	}
}
.storeItem {
	.img {
		width: 160rpx;
		height: 160rpx;
	}
	.score {
		color: #dc1a20;
		line-height: 30rpx;
	}
}
.side {
	width: 164rpx;
	.tab {
		width: 100%;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		color: var(--inactive-color);
		position: relative;
		&.on {
			color: var(--color);
			&::after {
				content: '';
				position: absolute;
				width: 6rpx;
				height: 50rpx;
				background: var(--color);
				left: 0;
				top: 50%;
				margin-top: -25rpx;
			}
		}
	}
}
.type {
	width: fit-content;
	line-height: 32rpx;
	padding: 0 10rpx;
	border-radius: 6rpx;
}
.p-left0 {
	padding-left: 0;
}
.shadow {
	box-shadow: 0 4rpx 10rpx 2rpx rgba(105, 105, 105, 0.1);
}
.scrollH {
	height: var(--height);
}
</style>
